<template>
  <layout :isShowDesc="false" id="layout" :appHeader="{title: 'INSURANCE', back: false}">
    <view class="banner-wrapper">
      <u-swiper :list="list" :title="false" height="276" indicator-color="#000"></u-swiper>
    </view>
    <view class="course">
      <view class="offline" v-if="online.length > 0">
        <view class="header-title">线下培训</view>
        <view class="item" v-for="(item, index) in offline" :key="index">
          <image class="cover-image" :src="item.coverImage" />
          <view class="content">
            <view class="title">{{item.title}}</view>
            <view class="detail-button" @click="DetailFn('offline', item)">查看详情</view>
          </view>
          <view class='sellout_box' v-if="item.hasAppointment">
            <view class='sellout'>
              已预约
            </view>
          </view>
        </view>
        <view v-if="online.length === 0">暫無數據</view>
      </view>
      <view class="online" v-if="offline.length > 0">
        <view class="header-title">在线文档</view>
        <view class="item" v-for="(item, index) in online" :key="index">
          <view class="top">
            <view class="content">
              <view class="title">{{item.title}}</view>
            </view>
            <image class="cover-image" :src="item.coverImage" mode="scaleToFill" />
          </view>
          <view class="bottom">
            <view class="document-tag">文档</view>
            <view class="detail-button" @click="DetailFn('online', item)">点击查看</view>
          </view>
        </view>
      </view>
    </view>
    </scroll-view>
    <scroll-view v-if="false" class="product-list" scroll-y="true">
      <view v-for="(item, index) in productList" :key="index" class="product-item-container">
        <view class="header">
          <view class="left">
            <view class="company">{{item.company}}</view>
            <view class="product-name">{{item.productName}}</view>
          </view>
          <image class="cover-image" :src="item.coverImage" mode="scaleToFill" />
        </view>
        <view class="body">
          <view class="overview">
            <view class="row">
              <view class="label">首年保费: </view>
              <view class="value">${{item.renewal_1}}</view>
            </view>
            <view class="row">
              <view class="label">10年平均年保费: </view>
              <view class="value">${{item.averagePremium}}</view>
            </view>
            <view class="row">
              <view class="label">条款评分: </view>
              <view class="value">{{item.score}}</view>
            </view>
          </view>
        </view>
        <view class="footer">
          <view class="feature-wrapper">
            <view class="feature" v-for="(feature, index) in item.features" key="index">{{feature}}</view>
          </view>
          <button class="detail-button">查询</button>
        </view>
      </view>
    </scroll-view>

  </layout>
</template>

<script>
import productList from './product.json'
// import online from './online.json'
// import offline from './offline.json'
export default {
  name: 'HomeView',

  data() {
    return {
      params: {
        page: 1,
        limit: 50,
        online: true
      },
      list: [{
        image: 'https://pub-img.perfectdiary.com/game/pet/image/2021/07/da1d9eef1fa74e67aa27e5b1b997aea4.jpg',
        title: '我們提供市場上熱門的保險產品資訊，以圖表和點對點方式顯示價格、回報、保障結構等範疇，助你輕鬆比較比較各個計劃，找出最能配合自己的產品。'
      },
      {
        image: 'https://pub-img.perfectdiary.com/game/pet/image/2021/07/f6b30cd9651b4ca7acf38f43e8a8bd1e.jpg',
        title: '買單後最怕變「孤兒」......我們提供一站式的保單跟進、理賠支援、醫療配套及健康管理服務，令你投保前後都倍感放心！'
      },
      {
        image: 'https://pub-img.perfectdiary.com/game/pet/image/2021/07/f6b30cd9651b4ca7acf38f43e8a8bd1e.jpg',
        title: '我們透過教學文章及影片，由淺入深地保險基本知識講到購買解碼攻略，話你知保險中伏位，教如何平靚正地選購保險。'
      }
      ],
      online: [],
      offline: [],
      productList
    };
  },
  onShow() {

    //获取在线课程列表
    this.getCourseList({
      page: 1,
      limit: 50,
      online: true
    });

    //获取线下课程列表
    this.getCourseList({
      page: 1,
      limit: 50,
      online: false
    })
  },
  methods: {
    getCourseList(params) {
      uni.$API.Training.getCourseList(params).then(res => {
        if (params.online) {
          this.online = res.data.list
        } else {
          this.offline = res.data.list
        }
      })
    },
    DetailFn(type, item) {
      if (type === 'online') {
        const description = JSON.parse(item.description)
        uni.navigateTo({
          url: `pages/course/document/index?resourceKey=${description.attachments}`
        })
      } else {
        uni.navigateTo({
          url: `pages/course/appointment/index?id=${item.id}`
        })
      }

    }
  }
}
</script>

<style lang="scss" scoped>
.sellout_box {
  width: 48%;
  height: 140rpx;
  margin: 10rpx 0;
  overflow: hidden;
  position: absolute;
  right: -14px;
  top: -16px;
  font-size: 10px;
}

.sellout {
  background-color: #515cc3;
  color: white;
  width: 70%;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  margin-left: 45%;
  margin-top: 40rpx;
  position: absolute;
  transform: rotate(45deg);
}
.banner-wrapper {
  padding: 30rpx 30rpx 46rpx 30rpx;
  background-color: #fff;
}
.course {
  font-size: 28rpx;
  color: rgba(66, 71, 95, 1);
  font-weight: bold;

  .offline {
    padding: 0 30rpx;
    background: #f3f3f3;
    .header-title {
      height: 88rpx;
      line-height: 88rpx;
    }
    .item {
      display: flex;
      background: #fff;
      padding: 30rpx;
      border-radius: 12rpx;
      margin-bottom: 24rpx;
      overflow: hidden;
      position: relative;
      &:last-child {
        margin-bottom: 10rpx;
      }
      .cover-image {
        width: 288rpx;
        height: 162rpx;
      }
      .content {
        width: 74%;
        margin-left: 28rpx;
        display: flex;
        flex-direction: column;
        position: relative;
        .title {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          line-height: 40rpx;
        }
        .detail-button {
          display: inline-block;
          width: 260rpx;
          height: 104rpx;
          line-height: 104rpx;
          border-radius: 52rpx;
          background: #515cc3;
          color: #fff;
          font-size: 40rpx;
          -webkit-transform: scale(0.5);
          text-align: center;
          align-self: flex-end;
          margin-right: -65rpx;
          position: absolute;
          bottom: -24rpx;
        }
      }
    }
  }
  .online {
    background: #f3f3f3;
    padding: 0 30rpx 10rpx 30rpx;
    .header-title {
      height: 88rpx;
      line-height: 88rpx;
    }
    .item {
      background: #fff;
      padding: 30rpx;
      border-radius: 12rpx;
      margin-bottom: 24rpx;

      .top {
        display: flex;
        justify-content: space-between;
        .content {
          .title {
            width: 400rpx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            line-height: 40rpx;
          }
        }
        .cover-image {
          width: 192rpx;
          height: 144rpx;
        }
      }
      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 34rpx;
        margin-top: 24rpx;
        .document-tag {
          width: 136rpx;
          height: 64rpx;
          line-height: 64rpx;
          text-align: center;
          background: rgba(58, 178, 154, 1);
          color: #fff;
          border-radius: 36rpx;
          font-size: 40rpx;
          margin-left: -34rpx;
          -webkit-transform: scale(0.5);
        }
        .detail-button {
          color: #515cc3;
          font-size: 24rpx;
        }
      }
    }
  }
}

.product-list {
  padding-left: 20rpx;
  padding-right: 20rpx;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  box-sizing: border-box;
  color: #42475f;
  .product-item-container {
    position: relative;
    padding: 0 30rpx;
    margin-bottom: 24rpx;
    background: #ffffff;
    border-radius: 12rpx;
    .header {
      padding: 20rpx 0;
      display: flex;
      border-bottom: 1rpx solid #f5f5f5;
      font-size: 32rpx;
      .left {
        flex: 2;
        font-weight: bold;
        line-height: 60rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .cover-image {
        width: 120rpx;
        height: 120rpx;
      }
    }
    .body {
      padding: 20rpx 20rpx 20rpx 0;
      display: flex;
      align-items: center;
      .overview {
        display: flex;
        flex-direction: column;
        flex: 2;
        .row {
          font-size: 28rpx;
          font-weight: 500;
          line-height: 88rpx;
          height: 88rpx;
          display: flex;
          justify-content: space-between;
          .label {
            width: 220rpx;
          }
        }
      }
    }
    .footer {
      display: flex;
      align-items: center;
      height: 108rpx;
      .feature-wrapper {
        flex: 1;
        display: flex;
        margin-right: 40rpx;
        .feature {
          padding: 0 16rpx;
          color: rgba(81, 92, 195, 1);
          background: rgba(235, 237, 249, 1);
          border-radius: 8rpx;
          font-size: 24rpx;
          height: 44rpx;
          line-height: 44rpx;
          margin-right: 20rpx;
        }
      }
      .detail-button {
        width: 150rpx;
        display: inline-block;
        height: 70rpx;
        line-height: 70rpx;
        font-size: 24rpx;
        background: #515cc3;
        border-radius: 10rpx;
        color: #fff;
        font-weight: bold;
        margin: 0;
      }
    }
  }
}

::v-deep.u-swiper-wrap {
  overflow: visible;
}
::v-deep.u-swiper-indicator {
  bottom: -26rpx !important;
}
::v-deep.u-indicator-item-round-active {
  background: #515cc3 !important;
}
::v-deep.u-indicator-item-round {
  background: rgba(81, 92, 195, 0.3);
}
</style>
